<template>
  <div class="page-number-box">
    <template v-if="totalArticle !== 0">
      <ArticleCard v-for="(article, index) in articles"
                   :article="article"
                   :key="String(index)">
      </ArticleCard>
      <div class="pagination-box">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handlePageChange"
            :current-page="currentPage"
            :page-sizes="[20, 50, 100]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalArticle"
            background>
        </el-pagination>
      </div>
    </template>
    <h1 v-else style="text-align: center; margin-top: 100px;">你还没有收藏过任何文章</h1>
  </div>
</template>

<script>
import ArticleCard from "@/components/ArticleCard";

export default {
  name: "PageNumber",
  components: {
    ArticleCard,
  },
  data(){
    return {
      totalArticle: 0,
      pageSize: 20,
      currentPage: 1,
    }
  },
  created(){
    // this.handleListArticle(this.username)
  },
  methods:{
    handleSizeChange(size){
      this.pageSize = size
      if (size > this.articleCount){
        this.currentPage = 1
      }
      // this.handleListArticle(this.username)
    },
    handleCurrentChange(page){
      this.currentPage = page
      // this.handleListArticle(this.username)
    },
  }
}
</script>

<style scoped>

</style>
